<template>
  <div class="photoinfo-container">
    <!-- 头部区域 -->
    <h3>{{ photosInfo.title }}</h3>
    <p>
      <span>发表时间：{{ photosInfo.add_time }}</span>
      <span>点击：{{ photosInfo.click_num }}次</span>
    </p>
    <hr>

    <!-- 缩略图区域 -->
    <vue-preview :slides="slide1" class="previewimg"></vue-preview>

    <!-- 图片内容区域 -->
    <div class="img-conttext" v-html="photosInfo.content_text"></div>

    <!-- 评论区域 -->
    <comment id=""></comment>
  </div>
</template>

<script>
import comment from '../subcomponents/common.vue'
export default {
  data() {
    return {
      id: this.$route.params.id,
      photosInfo: {},
      slide1: []
    }
  },
  created() {
    this.getPhotoInfo();
  },
  methods: {
    getPhotoInfo() {
      this.$http.get('./../../../api/homephotoInfo.json').then(res => {
        if(res.body.status === 0) {
          this.photosInfo = res.body.message;
          if(this.slide1.length === 0) {
            this.slide1 = res.body.message.imgs;
          }          
        }else {
          alert('error');
        }
      })
    }
  },
  components: {
    'comment': comment
  }
}
</script>

<style>
  .photoinfo-container {
    padding: 3px;
  } 
  .photoinfo-container h3{
    font-size: 15px;
    color: #26a2ff;
    text-align: center;
    margin: 15px 0;
  }

  .photoinfo-container p {
    font-size: 13px;
    display: flex;
    justify-content: space-between;
  }

  .img-conttext {
    font-size: 13px;
  }

  .previewimg img {
    width: 100%;
  }
</style>
